<template>
  <div class="dashboard-container">
    <div class="text-2xl font-bold mb-2">系统首页</div>
    <div class="text-gray-500 mb-4">欢迎使用项目发布平台</div>
    
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="mb-4 hover-shadow">
          <div class="flex items-center justify-between">
            <div class="text-lg">项目总数</div>
            <div class="text-2xl font-bold">{{ stats.projects }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mb-4 hover-shadow">
          <div class="flex items-center justify-between">
            <div class="text-lg">部署总数</div>
            <div class="text-2xl font-bold">{{ stats.deploys }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mb-4 hover-shadow">
          <div class="flex items-center justify-between">
            <div class="text-lg">成功部署</div>
            <div class="text-2xl font-bold text-green-500">{{ stats.success }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mb-4 hover-shadow">
          <div class="flex items-center justify-between">
            <div class="text-lg">失败部署</div>
            <div class="text-2xl font-bold text-red-500">{{ stats.failed }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="hover-shadow">
      <template #header>
        <div class="flex justify-between">
          <span>最近部署记录</span>
          <el-button type="primary" link @click="goToDeployList">查看更多</el-button>
        </div>
      </template>
      <el-table :data="recentDeploys" stripe>
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="env" label="环境">
          <template #default="{ row }">
            <el-tag>{{ row.env }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
              {{ row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="viewDetails(row.id)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'Dashboard'
})

const router = useRouter()

const stats = ref({
  projects: 12,
  deploys: 28,
  success: 24,
  failed: 4
})

const recentDeploys = ref([
  { id: '1', name: '项目A', env: '测试环境', status: 'success', time: '2025-07-24 14:30:00' },
  { id: '2', name: '项目B', env: '生产环境', status: 'success', time: '2025-07-24 10:15:00' },
  { id: '3', name: '项目C', env: '开发环境', status: 'failed', time: '2025-07-23 16:45:00' },
  { id: '4', name: '项目D', env: '测试环境', status: 'success', time: '2025-07-23 09:20:00' }
])

const goToDeployList = () => {
  router.push('/deploy/list')
}

const viewDetails = (id: string) => {
  router.push(`/deploy/detail/${id}`)
}

onMounted(() => {
  console.log('Dashboard mounted')
  // 可以在这里添加API调用，暂时使用模拟数据
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 0;
}

.hover-shadow {
  transition: box-shadow 0.3s;
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
</style>
